<template>
    <div class="comment-details">
        <c-title text="全部评价"></c-title>
        <div class="content">
            <div class="content-head">
                <div class="flex-center">
                    <img :src="member.avatar_image" />
                    <div>
                        <div class="nick-name">{{ member.nickname }}</div>
                        <div class="level">{{ member.level_name }}</div>

                    </div>
                </div>
                <div class="time">{{ comment_details.created_at }}</div>
            </div>
            <div class="content-txt">
                {{ comment_details.content }}
            </div>
            <div class="flex-center">
                <span class="time">评分：</span>
                <div class="flex-center">
                    <i v-for="item in 5" class="iconfont icon-fontclass-pingfen "
                        :class="{ 'current': item <= comment_details.score }"></i>
                </div>
            </div>
            <div class="comment-goods">
                <img :src="main_images_url" />
                <div class="comment-goods-title"> {{ product.name }}</div>
            </div>
        </div>

        <div class="all">全部评价</div>

        <div class="ul">
            <div class="li" v-for="(item,i) in child_comment" :key="item.id">
                <div class="flex-center" style="justify-content: space-between;">
                    <div class="flex-center">
                        <img :src="item.member.avatar" />
                        <span class="li-title">{{ item.member.nickname }}</span>
                        <span class="reply" v-if="item.is_shop">商家回复</span>
                    </div>
                    <div class="time">{{ item.created_at }}</div>
                </div>
                <div class="li-content">
                    {{ item.content }}
                </div>
                <div class="commentImg">
                    <img v-for="c_item in item.images_url" :src="c_item" />
                </div>
                <div class="line" v-if="i+1!==child_comment.length"></div>
            </div>
        </div>

    </div>
</template>
<script>

export default {
    data() {
        return {
            main_images_url:"",
            child_comment: [],
            member: {},
            comment_details: {},
            product: {},
        }
    },
    activated() {
        this.getData()
    },
    methods: {
        getData() {
            $http.post("plugin.kaipin-laboratory.frontend.product-plaza.get-comment-detail", { id: this.$route.params.id }, '').then(({ result, msg, data }) => {

                this.isLoadMore = true;
                if (result) {
                    this.member = data.member;
                    this.product = data.product;
                    this.comment_details = data;
                    this.child_comment = data.child_comment;
                    this.main_images_url = data.product.main_images_url[0]
                    console.log(data, 'data===');
                }
            })
        },
       
    }
}
</script>
<style lang="scss" scoped>
.comment-details {
    padding-bottom: 3.0625rem;

    .commentImg {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-bottom: 0.9375rem;
        // border-bottom: 1px solid #F0F0F1;
        margin-left: 1.8125rem;

        img {
            width: 4.375rem !important;
            height: 4.375rem !important;
            margin: 0 0.5rem 0.5rem 0 !important;
            border-radius: 0.25rem !important;
            -o-object-fit: cover;

        }
    }


    .ul {
        margin: .75rem;
        background-color: #fff;
        border-radius: 0.625rem;
        overflow: hidden;



        .li {
            margin: .75rem .75rem;

        }

        .line {
            margin-left: 1.8125rem;
        border-bottom: 1px solid #F0F0F1;
        }


        img {
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            border-radius: 100%;
        }
    }

    .reply {
        padding: .1875rem;
        border-radius: 0.1875rem;
        font-size: 0.625rem;
        background-color: #F5F5F5;
    }



    .li-content {
        font-weight: 400;
        font-size: 0.875rem;
        color: #00001C;
        margin-left: 1.8125rem;
        line-height: 1.25rem;
        text-align: left;
        margin-top: 0.4375rem;
        padding-bottom: .9375rem;

    }

    .time {
        font-weight: 400;
        font-size: 0.75rem;
        color: #8E8E95;
        line-height: 1;
    }

    .li-title {
        font-weight: bold;
        font-size: 0.875rem;
        color: #00001C;
        line-height: 1;
        margin-left: .3125rem;
        margin-right: .2188rem;
    }

    .all {
        margin-top: 0.8438rem;
        margin-bottom: .7813rem;
        text-align: left;
        font-weight: bold;
        font-size: .875rem;
        margin-left: .75rem;
    }


    .comment-goods {
        height: 2.5rem;
        line-height: 2.5rem;
        background: #F5F5F5;
        border-radius: 0.5rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-top: .9375rem;
        justify-content: baseline;

        img {
            margin: 0;
            width: 2.5rem;
            height: 2.5rem;
            background: #F6F6F6;
            border-radius: 0.5rem;
        }
    }

    .comment-goods-title {
        margin-left: .5rem;
        font-weight: 500;
        font-size: 0.8125rem;
        color: #00001C;
    }

    .current {
        color: var(--themeBaseColor) !important;
    }

    .icon-fontclass-pingfen {
        font-size: 0.6875rem;
        color: #D6D6DC;
        margin-right: .0938rem;
    }

    .content-txt {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #00001C;
        line-height: 1.125rem;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: .4063rem;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .time {
        font-weight: 400;
        font-size: 0.75rem;
        color: #8E8E95;
    }

    .content-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .625rem;
    }

    img {
        width: 2.25rem;
        height: 2.25rem;
        margin: 0 .2813rem 0 0;
        border-radius: 100%;
    }

    .level {
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 1;
        color: #8E8E95;
        text-align: left;
    }

    .nick-name {
        text-align: left;
        font-weight: bold;
        font-size: 0.875rem;
        color: #00001C;
        line-height: 1;
        margin-bottom: .1875rem;
    }

    .content {
        margin: .625rem .75rem;
        background-color: #fff;
        padding: .75rem .75rem;
        border-radius: 0.625rem;
    }


    .tips {

        .tips-bpx {
            width: 7.1875rem;
            height: 7.1875rem;
            border-radius: 50%;
            background: linear-gradient(180deg, #ECECF0 0%, rgba(239, 239, 239, 0) 100%);
        }
    }


    .footer {
        position: fixed;
        bottom: 0;
        height: 3.0625rem;
        left: 0;
        right: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 99;
    }

    .footer-item {
        font-size: .625rem;
        color: #00001C;
        display: flex;
        flex-direction: column;
        justify-content: center;

        i {
            font-size: 1.25rem;
        }
    }
}
</style>